<template>
    <div class="view">
        <android-nav-bar title="个人资料" v-on:back="back"></android-nav-bar>
        <div class="box">
            <div class="avatar flex" @click="toPage('mineAlbum')">
                <div class="left">头像</div>
                <div class="right flex">
                    <head-img class="self-img"
                              :styleObject="{width:'11vw',height:'11vw'}"
                              showObject="self" :friend="self"
                              :self="self"
                              noneImgTip=""></head-img>
                    <div class="iconfont icon-youbian"></div>
                </div>
            </div>
            <div class="account flex">
                <div class="left">账号</div>
                <div class="right flex">
                    <div class="phone">{{user.phone}}</div>
                </div>
            </div>
            <div class="account flex" @click="toPage('settingPassword')">
                <div class="left">修改密码</div>
                <div class="right flex">
                    <div class="iconfont icon-youbian"></div>
                </div>
            </div>
            <div class="account flex" @click="toPage('mineAlipay')">
                <div class="left">支付宝账号</div>
                <div class="right flex">
                    <div class="phone">{{user.alipay===''?'暂无':user.alipay}}</div>
                    <div class="iconfont icon-youbian"></div>
                </div>
            </div>
            <div class="account flex" @click="toPage('mineWxpay')">
                <div class="left">微信号</div>
                <div class="right flex">
                    <div class="phone">{{user.wxpay===''?'暂无':user.wxpay}}</div>
                    <div class="iconfont icon-youbian"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Vue, Watch} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";
    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";
    import CommonUnit from "@/unit/CommonUnit";
    import {updateUser, shareControllerToggle} from "@/store/dispatches";
    import UserEntity from "@/entity/UserEntity";
    import AndroidNavBar from "@/components/aui/AndroidNavBar.vue";
    import HeadImg from "@/components/HeadImg.vue";

    @Component({
        components: {
            AndroidNavBar, HeadImg
        }
    })
    export default class MineShare extends Scene {
        private publicPath: string = process.env.BASE_URL;
        @State("UserStore")
        public user!: InterfaceUser;

        @State("DeviceStore")
        public device: any;

        private get self(): any {
            return {
                headImg: this.user.avatarId > 0 ? this.user.avatar.filePath : "",
            };
        }

        private back(): void {
            this.navigateBack();
        }

        private toPage(name: string, query: any = {}): any {
            this.navigateTo({
                name: name,
                query: query
            });
        }

        private makeQRCode(): void {
            const QRCode = require("qrcode");
            const canvas = document.getElementById("canvas");
            let url = "";
            if (window.location.href.split("love.html").length == 2) {
                url = window.location.href.split("love.html")[0] + "love.html#/";
            } else {
                url = window.location.href.split("mine")[0];
            }
            let shareUrl = "";
            console.log(url);
            if (this.device.status) {
                shareUrl = `https://www.xxyhl.cn/love.html#/loginRegister?shareCode=${this.user.code}`;
            } else {
                shareUrl = `${url}loginRegister?shareCode=${this.user.code}`;
            }
            QRCode.toCanvas(canvas, shareUrl, function(error: any) {
                if (error) {
                    console.error(error);
                }
                console.log("success!");
            });
        }

        private mounted(): void {

        }


    }
</script>

<style scoped lang="stylus">
    .view
        position relative;
        width 100vw;
        height 100vh;
        background $theme-page-common-background-color;
        overflow hidden;

        .box
            width 100vw;
            margin-top calc(var(--safe-area-inset-top) + 47px);
            height calc(100vh - var(--safe-area-inset-top) - 47px);

            >div
                background-color #fff;
                height 55px;
                border-bottom 1px solid $theme-line-color;
                justify-content: space-between;
                align-items center;
                padding 0 15px;

                .right
                    align-items center;
                    .icon-youbian
                        margin-left 10px;
                        color $theme-viceColor-font;








</style>
